<template>
  <div class="app-container">
    <!-- 头部 -->
    <div class="filter-container">
      <!-- 搜索品牌查询 -->
      <el-input
        v-model="listQuery.typeTwo"
        placeholder="输入品牌"
        style="width: 200px"
        class="filter-item"
      />
      <!-- 一级查询 -->
      <el-select
        v-model="listQuery.typeOneId"
        placeholder="选择类别"
        style="width: 130px"
        class="filter-item"
        @change="handleFilter"
      >
        <el-option
          v-for="item in importanceTypeOne"
          :key="item._id"
          :label="item.typeOne"
          :value="item._id"
        />
      </el-select>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="clickFilter"
      >
        筛选
      </el-button>
      <el-button class="filter-item" @click="resetType">重置</el-button>
    </div>
    <!-- 渲染列表 -->

    <el-table
      :data="importanceTypeTwo.rows"
      style="width: 100%; margin-top: 20px"
      border
    >
      <el-table-column label="ID">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row._id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属类别">
        <template slot-scope="scope">
          <!-- 问题 -->
          <p>{{ scope.row.typeOneId && scope.row.typeOneId.typeOne }}</p>
        </template>
      </el-table-column>
      <el-table-column label="品牌">
        <template slot-scope="scope">
          <p>{{ scope.row.typeTwo }}</p>
        </template>
      </el-table-column>

      <el-table-column label="Logo">
        <template slot-scope="scope">
          <p><img :src="scope.row.Img" alt="" height="40" /></p>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            slot="reference"
            @click="handleDelete(scope.$index, scope.row)"
            size="mini"
            type="danger"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="importanceTypeTwo.page"
        :page-sizes="[7, 15, 20, 100]"
        :page-size="importanceTypeTwo.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="importanceTypeTwo.total"
      >
      </el-pagination>
    </div>
    <!-- 修改弹出框 -->
    <el-dialog
      title="修改二级列表信息"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-form
        :model="dialogTypeTwo"
        ref="dialogTypeTwo"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="品牌"
          prop="typeTwo"
          :rules="[{ required: true, message: '分类不能为空' }]"
        >
          <el-input
            type="typeOne"
            v-model="dialogTypeTwo.typeTwo"
            placeholder="请输入品牌 如 小米、华为"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- 添加图片 -->
        <!-- :on-success="handleAvatarSuccess" -->
        <el-form-item label="分类图片:" prop="img">
          <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            accept="image/jpg,image/png,image/jpeg"
            :on-change="imgBroadcastChange"
            :auto-upload="false"
          >
            <img
              v-if="dialogTypeTwo.Img"
              :src="dialogTypeTwo.Img"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <!-- 绑定一级类别 -->
        <el-form-item label="所属类别:" prop="pic">
          <el-select
            v-model="dialogTypeTwo.typeOneId"
            :label="dialogTypeTwo.typeOneId && dialogTypeTwo.typeOneId.typeOne"
            placeholder="请选择类别"
          >
            <el-option
              v-for="(item, index) in importanceTypeOne"
              :key="index"
              :label="item.typeOne"
              :value="item._id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpd('dialogTypeTwo')"
          >确 定</el-button
        >
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getProduct } from "@/api/product";
import { getList, search, upDate, delType } from "@/api/typeTwo";
export default {
  data() {
    return {
      //绑定二级表格
      importanceTypeTwo: {
        page: 1,
        limit: 7,
        total: 0,
        maxPage: 0,
        rows: [],
      },
      //一级列表
      importanceTypeOne: [],
      //绑定修改表格
      dialogTypeTwo: {
        typeOneId: "",
        Img: "",
        typeTwo: "",
      },
      //绑定筛选
      listQuery: {
        typeTwo: "",
        typeOneId: "",
      },
      //弹出层状态
      dialogVisible: false,
    };
  },
  created() {
    this.getTypeOne();
    this.getTypeTwo();
  },
  methods: {
    //  初始化
    getTypeOne() {
      getProduct().then((res) => {
        this.importanceTypeOne = res;
      });
    },
    getTypeTwo() {
      getList({
        page: this.importanceTypeTwo.page,
        limit: this.importanceTypeTwo.limit,
      }).then((res) => {
        this.importanceTypeTwo.rows = res.rows;
        this.importanceTypeTwo.total = res.total;
      });
    },
    //通过一级类型筛选
    handleFilter() {
      search({
        listQuery: this.listQuery,
        page: this.importanceTypeTwo.page,
        limit: this.importanceTypeTwo.limit,
      }).then((res) => {
        this.importanceTypeTwo.rows = res.rows;
        this.importanceTypeTwo.total = res.total;
      });
    },
    //品牌筛选
    clickFilter() {
      if (!this.listQuery.typeTwo) {
        this.$message(`请在输入框输入您要筛选的品牌！`);
      } else {
        search({
          listQuery: this.listQuery,
          page: this.importanceTypeTwo.page,
          limit: this.importanceTypeTwo.limit,
        }).then((res) => {
          this.importanceTypeTwo.rows = res.rows;
          this.importanceTypeTwo.total = res.total;
        });
      }
    },
    //搜索重置
    resetType() {
      this.listQuery = "";
      this.getTypeTwo();
    },
    //编辑赋值给弹出层
    handleEdit(row) {
      this.dialogVisible = true;
      this.dialogTypeTwo.typeOneId = row.typeOneId._id;
      this.dialogTypeTwo.typeTwo = row.typeTwo;
      this.dialogTypeTwo.Img = row.Img;
      this.dialogTypeTwo._id = row._id;
    },
    //确认修改
    handleUpd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = this.dialogTypeTwo;
          upDate(data).then(() => {
            this.$message(`修改成功`);
            this.dialogVisible = false;
            //  修改成功，初始化列表
            this.getTypeTwo();
          });
        }
      });
    },
    // 删除
    handleDelete(index, row) {
      console.log(row._id);
      this.$confirm("此操作将任务状态改为删除状态, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(row);
          delType(row).then(() => {
            this.$message("删除成功");
            this.getTypeTwo();
          });
        })
        .catch(() => {
          this.$message("取消成功");
        });
    },
    //限制图片大小
    imgBroadcastChange(file, fileList) {
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (isLt1M) {
        // uploadImgToBase64()返回一个Promise对象，通过.then()获取其数据。其中data.result是图片转成的base64值
        this.uploadImgToBase64(file.raw).then((data) => {
          this.dialogTypeTwo.Img = data.result;
        });
      } else {
        this.$message.error("上传封面图片大小不能超过 1MB!");
      }
    },
    //将上传的图片转换成Base64
    uploadImgToBase64(file) {
      //核心方法，将图片转成base64字符串形式
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
          // 图片转base64完成后返回reader对象
          resolve(reader);
        };
        reader.onerror = reject;
      });
    },
    //分页
    handleSizeChange(val) {
      this.importanceTypeTwo.limit = val;
      this.getTypeTwo();
    },
    handleCurrentChange(val) {
      this.importanceTypeTwo.page = val;
      this.getTypeTwo();
    },
  },
};
</script>

<style>
.el-table td,
.el-table th {
  text-align: center !important;
}
.el-table td {
  padding: 0;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
.filter-item {
  margin-right: 5px;
}
</style>